<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/header.css" rel="stylesheet" />
	</head>
	<body>
		<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<a id="add_friend" class="mui-icon mui-icon-right-nav mui-pull-right" style="color: white;line-height: 26px;font-size: 14px;">搜索</a>
			<h1 class="mui-title title-color">新的朋友</h1>
		</header>
		
		<div class="mui-content">
			<div class="mui-input-row" style="margin: 10px;">
		    		<input id="text_friendname" type="text" class="mui-input-speech mui-input-clear" placeholder="输入ChatID：如123456">
		    		<label  style="width: 100%;text-align: center;margin-top: -20px;">
		        		<span id="my_username" style="font-size: 12px;color: gray"></span>
		        		<img  id="my_qrcode" src="../image/qrcode.png"/ style="max-width: 18px;max-height: 18px; vertical-align:middle;margin-left: 5px;">
		    		</label>
		    </div>
		    <span style="margin-left:10px;font-size: 12px;" id="friend_count"></span>
			<ul class="mui-table-view" id="friend_request_list">
				<!--<li class="mui-table-view-cell">
					<div class="mui-slider-right mui-disabled" >
						<a class="mui-btn mui-btn-success mui-icon"  style="font-size: 15px;line-height: 30px;">通过</a>
						<a class="mui-btn mui-btn-danger mui-icon"  style="font-size: 15px;line-height: 30px;">忽略</a>
					</div>
					<div class="mui-slider-handle">
						<img id="img_friend_face" class="mui-media-object mui-pull-left" src="../css/registLogin/headimg.jpg" 
						style="border-radius: 8%;max-width: 40px;max-height: 40px;">
						<span id="" style="font-size: 16px;line-height: 40px;">Crism</span>
						<span id="" style="float:right;line-height: 40px;font-size: 14px;color: grey;">等待验证</span>
					</div>
				</li>-->
			</ul>

		</div>
	
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js" type="text/javascript" ></script>
		<script type="text/javascript">
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});
			mui.plusReady(function() {
				var fr_user_info = app.getUserInfo();
			    if(fr_user_info != null){
					var userName = fr_user_info.userName;
					var my_username = document.getElementById("my_username");
					my_username.innerHTML = "我的ChatID：" + userName;
			    }
			    
			    var thisWebView = plus.webview.currentWebview();
				thisWebView.addEventListener("show",function(){
					loadFriendRequest(fr_user_info.userId)
				});
				
			    // 我的二维码页面
				var my_qrcode = document.getElementById("my_qrcode");
				my_qrcode.addEventListener("tap",function(){
					mui.openWindow("../my/qrcode.html", "qrcode.html");
				});
			  
			    var add_friend = document.getElementById("add_friend");
 				add_friend.addEventListener("tap",function(){
 					var text_friendname = document.getElementById("text_friendname");
 					text_friendname.blur();
					var inputName = text_friendname.value;
			    		if(inputName.length>12 || inputName.length<5){
			    			app.showToast("长度6-12位！","error");
						text_friendname.focus();
						return false;
			    		}
			    		plus.nativeUI.showWaiting("请稍等");
					var url = app.serverUrl + '/u/searchUser?friendUserName=' + inputName + '&myUserId=' + fr_user_info.userId;
			    		mui.ajax(url,{
						dataType:'json',//服务器返回json格式数据
						type:'post',//HTTP请求类型
						timeout:10000,//超时时间设置为10秒；
						headers:{'Content-Type':'application/json'},	              
						success:function(data){
							plus.nativeUI.closeWaiting();
							if(data.status == 200){
								var userInfo = data.data;
								mui.openWindow({
									url: "friend_info.html",
								    id: "friend_info.html",
								    extras:{
								      friendInfo:data.data,
								      fr_user_info:fr_user_info
								    },
								});
							}else{
								app.showToast(data.msg, "error");	
							}
						},
						error:function(xhr,type,errorThrown){
							app.Error();
						}
					});
				});
			})
			var friend_count = document.getElementById("friend_count");
			function loadFriendRequest(userId){
				var url = app.serverUrl + "/f/queryFriendRequest?userId=" + userId;
				mui.ajax(url,{
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},	              
					success:function(data){
						if(data.status == 200){
							renderFriendList(data.data,userId);
							if(data.data.length>0){
								friend_count.innerHTML = "好友请求: " + data.data.length;
							}else{
								friend_count.innerHTML = "";
							}
						}else{
							app.showToast(data.msg, "error");	
						}
					},
					error:function(xhr,type,errorThrown){
						app.Error();
					}
				});
			}
			/* 拼列表 */
			function renderFriendList(friendList,userId){
				var friend_request_list = document.getElementById("friend_request_list");
				if(friendList != null && friendList.length > 0){
					var reqHtml = "";
					for (var i = 0;i < friendList.length;i++) {
						reqHtml += renderFriend(friendList[i]);
					}
					friend_request_list.innerHTML = reqHtml;
					/* 按钮事件绑定 */
					mui(".btOper").on("tap",".reqIgnore",function(e){
						operatorFriendRequest(userId,this.getAttribute("friendId"),0);
					});
					/* 按钮事件绑定 */
					mui(".btOper").on("tap",".reqAccess",function(e){
						operatorFriendRequest(userId,this.getAttribute("friendId"),1);
					});
				}else{
					friend_request_list.innerHTML = "";
				}
			}
			/* 拼接单个好友请求li */
			function renderFriend(friend){
				var html = "";
				html = '<li class="btOper mui-table-view-cell">' + 
							'<div class="mui-slider-right mui-disabled" >'+
								'<a friendId="'+ friend.sendUserId +'" class="reqAccess mui-btn mui-btn-success mui-icon"  style="font-size: 15px;line-height: 30px;">通过</a>'+
								'<a friendId="'+ friend.sendUserId +'" class="reqIgnore mui-btn mui-btn-danger mui-icon"  style="font-size: 15px;line-height: 30px;">忽略</a>'+
							'</div>'+
							'<div class="mui-slider-handle">'+
								'<img id="img_friend_face" class="mui-media-object mui-pull-left" src="'+ friend.sendFaceImg +'"'+
								'style="border-radius: 8%;max-width: 40px;max-height: 40px;">'+
								'<span id="" style="font-size: 16px;line-height: 40px;">'+ friend.sendNickName +'</span>'+
								'<span id="" style="float:right;line-height: 40px;font-size: 14px;color: grey;">等待验证</span>'+
							'</div>'+
						'</li>'
				return html;
			}

				/* 操作请求 */
			function  operatorFriendRequest(userId,friendId,type){
				var url = app.serverUrl + "/f/operatorFriendRequest?accessUserId="+userId+"&sendUserId="+ friendId+"&opType="+type;
//				console.log(url)
				mui.ajax(url,{
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},	              
					success:function(data){
						if(data.status == 200){
							app.setContactList(data.data);
							var myfaceWebview = plus.webview.getWebviewById("contact.html");
							mui.fire(myfaceWebview, "refresh");
							loadFriendRequest(userId);
						}
					},
					error:function(xhr,type,errorThrown){
						app.Error();
					}
				});
			}
		</script>
	</body>
</html>
